<template>
  <el-card>
    <el-divider><h3>我是学生管理页</h3></el-divider>
    <el-form :inline="true">
      <el-form-item label="查看所在班级学生：">
        <el-select v-model="classObject.id" @change="change">
          <el-option
              v-for="classGrade in classList"
              :key="classGrade.id"
              :label="classGrade.name"
              :value="classGrade.id"
          />
        </el-select>
      </el-form-item>
      <el-button type="primary" @click="stuAddDialogVisible = true;eOra = 1">新增用户</el-button>
    </el-form>
    <el-table
        border
        :data="studentList"
        style="width: 100%;margin-top: 30px;">
      <el-table-column
          label="班级"
          prop="classGrade.name">
      </el-table-column>
      <el-table-column
          label="姓名"
          prop="name">
      </el-table-column>
      <el-table-column
          label="年龄"
          prop="age">
      </el-table-column>
      <el-table-column
          label="性别"
          prop="gender">
      </el-table-column>
      <el-table-column
          label="联系人"
          prop="emergencyContact">
      </el-table-column>
        <el-table-column
            label="联系人电话"
            prop="emergencyMobile">
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
          >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </el-card>
  <!--添加学生-->
  <add-stu-dialog ref="addStu"  :visible="stuAddDialogVisible" :classObject="classObject"
                  :eOra="eOra"
                  @on-cancel="cancel" @on-confirm="confirm" @on-edit="edit"/>
</template>

<script type="module">
import  { fetchclassData, listContent , addContent} from '../../../../static/Api/api.js'
export default {
  name: "ChildrenManage",
  components: {
    'add-stu-dialog': loadVue('/views/manage-for-teacher/views/ChildrenManage/components/AddStuDialog.vue'),
  },
  data(){
    return{
      eOra:1,
      classList:[],
      classObject:{
        id:null,
        name:""
      },
      stuAddDialogVisible:false,
      studentList:[
        {
          "name":"xx",
          "age":"12",
          "gender":'MALE',
          "emergencyContact":"xxx",
          "emergencyMobile":"13611111111",
          "classId":null,
          "classGrade":""
        }
      ]
    }
  },
  mounted(){
    // 查询所有班级并指定默认班级
    this.fetchClassData();
  },
  methods:{
    change(e){
      let value = this.classList.filter((res)=>{
         return res.id == e;
      })
      const name = value[0].name;
      console.log("父组件66666666",value[0])
      this.classObject ={id:e, name:name};
      this.getlist(e);
    },
    // 查询班级数据
    async fetchClassData(){
      const  res = await  fetchclassData('/getCurrentTeacherClass');
      const  {success, data, msg} = res.data;
      if(!success) return this.$notify.error({title: '查询教师管理班级失败', message: msg});
      this.classList = data;
      const {id ,name} = data[0];
      this.classObject ={id:id, name:name};
      this.getlist(id);
    },
    async getlist(classId){
      //查询学生列表
      const  res = await  listContent('/children/listChildren/',classId);
      const  {success, data, msg} = res.data;
      if(!success) return this.$notify.error({title: '学生列表查询失败', message: msg});
      this.studentList = data;

    },
    handleEdit(index, row){
      this.stuAddDialogVisible = true;
      this.eOra = 0;
      const  {classGrade} = row;
      const form = {...row,classGrade:classGrade.name};
      this.$refs.addStu.stuForm = form;
    },
    /**
     * 取消回调
     */
    cancel() {
      this.stuAddDialogVisible = false;
    },
    /**
     * 确认回调
     */
    async confirm(res1) {
      const  params = res1
      delete params['classGrade']
      const res = await addContent('children/addOrEditChild',params);
      this.$refs.addStu.reset();
      this.getlist(this.classObject.id);
      this.cancel();
    },
    async edit(res1){
      const  params = res1
      delete params['classGrade'];
      delete params['classId'];
      delete params['parent'];
      const res = await addContent('children/addOrEditChild',params);
      this.$refs.addStu.reset();
      this.getlist(this.classObject.id);
      this.cancel();
    }
  }
}
</script>

<style scoped>

</style>